// /*
//  * Copyright (c) 2025 Huawei Device Co., Ltd.
//  * Licensed under the Apache License, Version 2.0 (the "License");
//  * you may not use this file except in compliance with the License.
//  * You may obtain a copy of the License at
//  *
//  *     http://www.apache.org/licenses/LICENSE-2.0
//  *
//  * Unless required by applicable law or agreed to in writing, software
//  * distributed under the License is distributed on an "AS IS" BASIS,
//  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  * See the License for the specific language governing permissions and
//  * limitations under the License.
//  */

import React, { useState } from 'react';
import { Alert, View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import { KnockShare, SharedRecord } from '@hadss/react_native_knock_share';
import Head from './head';

interface DataObject {
  type: string;
  setTouchit: Function;
}

const data = {
  '0': {
    utd: 'general.jpeg',
    uri: 'file://com.hadss.ohFeature/data/storage/el2/base/haps/entry/files/exampleKnock3.jpg',
    thumbnailUri: 'file://com.hadss.ohFeature/data/storage/el2/base/haps/entry/files/exampleKnock3.jpg',
  },
  '1': {
    utd: 'general.hyperlink',
    content: 'https://sharekitdemo.drcn.agconnect.link/ZB3p',
    thumbnailUri: 'file://com.hadss.ohFeature/data/storage/el2/base/haps/entry/files/exampleKnock1.jpg',
    title: '唯一没有的地貌，峡湾地貌',
    description: 'HarmonyShare · 220.8万播放',
  },
  '2': {
    utd: 'general.hyperlink',
    content: 'https://sharekitdemo.drcn.agconnect.link/ZB3p',
    thumbnailUri: 'file://com.hadss.ohFeature/data/storage/el2/base/haps/entry/files/exampleKnock2.png',
    title: '海岸风光·天气晴朗',
    description: 'HarmonyShare · 220.8万播放',
  },
};

function Touchit({ type, setTouchit }: DataObject): JSX.Element {
  const [isListening, setIsListening] = useState(false);
  const addListener = (): void => {
    if (isListening) {
      Alert.alert('提示', '请先停止当前监听再开启新监听');
      return;
    }
    KnockShare.addKnockShareListener();
    setIsListening(true);
  };
  const handle = (shareData: Array<SharedRecord>): void => {
    KnockShare.setKnockShareData(shareData);
  };
  const handlePress = (): void => {
    if (!isListening) {
      addListener();
      handle([data[type]]);
    } else {
      KnockShare.removeKnockShareListener();
      setIsListening(false);
    }
  };
  return (
    <View style={{ flex: 1 }}>
      <Head type={type} setTouchit={setTouchit} />
      <View style={styles.content}>
        <View style={styles.card}>
          {type === '2' ? (
            <Image style={{ width: 296, height: 305 }} source={require('./hellorf_2.png')} />
          ) : (
            <Image style={{ width: 296, height: 395 }} source={require('./hellorf_1.png')} />
          )}
          {type !== '0' && (
            <View style={[type === '1' ? styles.centinnText : type === '2' ? styles.centText : {}]}>
              <Text
                style={[
                  type !== '2' ? { color: '#fff' } : { color: '#000' },
                  { textAlign: 'center', fontSize: 16, lineHeight: 24 },
                ]}>
                我看到了最美的景色，是其他地方没有的景色
              </Text>
            </View>
          )}
        </View>
        <TouchableOpacity
          onPress={(): void => {
            handlePress();
          }}
          style={styles.botton}>
          {isListening ? <Image source={require('./listing.png')} style={{ marginRight: 5 }}></Image> : ''}
          <Text style={{ color: '#FFF' }}>{isListening ? '碰一碰事件监听中' : '点击开启碰一碰事件监听'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  content: {
    flex: 1,
    height: '100%',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  card: {
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    padding: 16,
    borderRadius: 16,
    marginBottom: 160,
  },
  botton: {
    width: '75%',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0A59F7',
    height: 40,
    marginTop: 12,
    borderRadius: 20,
    position: 'absolute',
    bottom: 36,
  },
  centText: {
    paddingTop: 24,
    paddingBottom: 14,
    paddingHorizontal: 28,
  },
  centinnText: {
    position: 'absolute',
    bottom: 42,
    left: 54,
    right: 54,
  },
});

export default Touchit;
